<script setup>
import {ref} from "vue";
import Son from "@/components/4事件/1.子组件.vue"

const posts = ref([
  {id: 1, title: 'My journey with Vue'},
  {id: 2, title: 'Blogging with Vue'},
  {id: 3, title: 'Why Vue is so fun'}
])
// 字体大小的响应式变量
const postFontSize = ref(1)
</script>


<template>
  <!--  <div :style="{ fontSize: postFontSize + 'em' }">-->
  <!--    &lt;!&ndash;        父组件就可以监听到子组件发送过来事件名&ndash;&gt;-->
  <!--    &lt;!&ndash;    父组件绑定的事件名称要和子组件传递过来的名称要保持一致&ndash;&gt;-->
  <!--&lt;!&ndash;    父组件在使用事件的时候用kebab-case 形式&ndash;&gt;-->
  <!--    <Son-->
  <!--        v-for="post in posts"-->
  <!--        :key="post.id"-->
  <!--        :title="post.title"-->
  <!--        @enlarge-text="postFontSize += 0.1"-->
  <!--    />-->
  <!--  </div>-->

<!--  演示接收子组件传递过来的参数值-->
  <div :style="{ fontSize: postFontSize + 'em' }">
    <Son
        v-for="post in posts"
        :key="post.id"
        :title="post.title"
        @enlarge-text="(n)=>{ postFontSize += n}"
    />
  </div>


</template>


<style scoped>

</style>
